// 设置页面
<template>
  <div class="setup">
    <!-- 头部 -->
    <div class="demo-nav" style="">
      <div class="demo-nav__title">设置</div>
      <div class="fanhui" @click="fanhui">
        <svg viewBox="0 0 1000 1000" class="demo-nav__back">
          <path
            fill="#969799"
            fill-rule="evenodd"
            d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"
          ></path>
        </svg>
      </div>
    </div>
    <!-- 内容 -->
    <ul>
      <li class="neili" @click="geRen()">
        <a href="#">
          <div>个人资料</div>
          <div class="zhong"></div>
          <svg
            t="1635840645793"
            class="icon"
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            width="12"
            height="12"
          >
            <path
              d="M236.552013 926.853955a55.805997 55.805997 0 0 0 0 80.454996 59.682997 59.682997 0 0 0 82.794996 0l468.099978-455.081978a55.805997 55.805997 0 0 0 0-80.453996L319.348009 16.689999a59.682997 59.682997 0 0 0-82.794996 0 55.805997 55.805997 0 0 0 0 80.454996L663.401993 511.999975 236.624013 926.853955z"
              p-id="2421"
            ></path>
          </svg>
        </a>
      </li>
      <li class="neili" @click="zhanghao()">
        <a href="#">
          <div>账号安全</div>
          <div class="zhong"></div>
          <svg
            t="1635840645793"
            class="icon"
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            width="12"
            height="12"
          >
            <path
              d="M236.552013 926.853955a55.805997 55.805997 0 0 0 0 80.454996 59.682997 59.682997 0 0 0 82.794996 0l468.099978-455.081978a55.805997 55.805997 0 0 0 0-80.453996L319.348009 16.689999a59.682997 59.682997 0 0 0-82.794996 0 55.805997 55.805997 0 0 0 0 80.454996L663.401993 511.999975 236.624013 926.853955z"
              p-id="2421"
            ></path>
          </svg>
        </a>
      </li>
      <li class="neili">
        <a href="#">
          <div>关于</div>
          <div class="zhong"></div>
          <svg
            t="1635840645793"
            class="icon"
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            width="12"
            height="12"
          >
            <path
              d="M236.552013 926.853955a55.805997 55.805997 0 0 0 0 80.454996 59.682997 59.682997 0 0 0 82.794996 0l468.099978-455.081978a55.805997 55.805997 0 0 0 0-80.453996L319.348009 16.689999a59.682997 59.682997 0 0 0-82.794996 0 55.805997 55.805997 0 0 0 0 80.454996L663.401993 511.999975 236.624013 926.853955z"
              p-id="2421"
            ></path>
          </svg>
        </a>
      </li>
      <li class="neili">
        <a href="#">
          <div>语言</div>
          <div class="zhong"></div>
          <svg
            t="1635840645793"
            class="icon"
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            width="12"
            height="12"
          >
            <path
              d="M236.552013 926.853955a55.805997 55.805997 0 0 0 0 80.454996 59.682997 59.682997 0 0 0 82.794996 0l468.099978-455.081978a55.805997 55.805997 0 0 0 0-80.453996L319.348009 16.689999a59.682997 59.682997 0 0 0-82.794996 0 55.805997 55.805997 0 0 0 0 80.454996L663.401993 511.999975 236.624013 926.853955z"
              p-id="2421"
            ></path>
          </svg>
        </a>
      </li>
      <li class="neili">
        <a href="#">
          <div>隐私</div>
          <div class="zhong"></div>
          <svg
            t="1635840645793"
            class="icon"
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            width="12"
            height="12"
          >
            <path
              d="M236.552013 926.853955a55.805997 55.805997 0 0 0 0 80.454996 59.682997 59.682997 0 0 0 82.794996 0l468.099978-455.081978a55.805997 55.805997 0 0 0 0-80.453996L319.348009 16.689999a59.682997 59.682997 0 0 0-82.794996 0 55.805997 55.805997 0 0 0 0 80.454996L663.401993 511.999975 236.624013 926.853955z"
              p-id="2421"
            ></path>
          </svg>
        </a>
      </li>
    </ul>
    <!-- 底部 -->
    <div class="btm">
      <van-button type="primary" round block @click="loginout"
        >退出登录</van-button
      >
    </div>
  </div>
</template>

<script>
import { removeToken } from "../../utils/setCookie";
export default {
  data() {
    return {};
  },
  computed: {},
  watch: {},

  methods: {
    geRen() {
      this.$router.push("/personal-data");
    },
    fanhui() {
      console.log(11111111);
      this.$router.push("/mine");
    },
    zhanghao() {
      this.$router.push("/account-security");
    },
    loginout() {
      removeToken();
      this.$router.push("/login");
    },
  },
  created() {},
  mounted() {},
  components: {},
};
</script>
<style scoped>
/* 头部 */
.demo-nav {
  justify-content: center;
  height: 45px;
  background-color: #fff;
  position: relative;
  display: flex;
  line-height: 45px;
  align-items: center;
}
.fanhui {
  width: 24px;
  height: 24px;
  overflow: hidden;
}
.demo-nav__title {
  font-weight: 600;
  font-size: 18px;
}
.demo-nav__back {
  position: absolute;
  font-size: 16px;
  left: 16px;
  width: 24px;
  height: 24px;
  color: #323233;
}
/* 内容 */
.neili {
  width: 100%;
  border-bottom: 1px solid #f2f2f2;
}
.neili a {
  width: 90%;
  margin: 0 auto;
  height: 60px;
  font-size: 12px;
  color: #323233;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.neili a div {
  display: inline-block;
}
.neili a .icon {
  width: 20px;
  display: inline-block;
}

/* 底部 */
.btm {
  height: 220px;
  background-color: #f5f5f5;
}
.btm .van-button {
  color: #fff;
  background-color: #111;
  border: none;
  width: 85%;
  margin: 0 auto;
  position: absolute;
  bottom: 30px;
  left: 7.5%;
}
</style>
